/*
 * @Descripttion: 自定义指令：长按触发事件 v-longpress
 * @Author: 66
 * @Date: 2020-12-15 10:58:25
 * @LastEditors: 66
 * @LastEditTime: 2020-12-15 11:09:23
 * @ 1.创建定时器，2秒后执行函数
 * @ 2.当用户按下按钮时触发 mousedown 事件，启动计时器；用户松开按钮时调用 mouseout 事件。
 * @ 3.如果 mouseup 事件2秒内被触发，就清除计时器，当做一个普通的点击事件
 * @ 4.如果计时器没有在2秒内清除，则判定为一次长按，可以执行关联的函数。
 * @ 5.在移动端要考虑 touchstart，touchend事件
 */
const longpress = {
  bind: (el, binding, vNode) => {
    if(typeof binding.value !== 'function') {
      throw 'callback must be a function'
    }
    // 定义变量
    let pressTimer = null
    // 创建定时器（2秒后执行函数）
    let start = (e) => {
      if(e.type === 'click' && e.button !== 0) {
        return
      }
      if(pressTimer === null) {
        pressTimer = setTimeout(() => {
          handler()
        }, 2000);
      }
    }
    // 取消计时器
    let cancel = (e) => {
      if(pressTimer !== null) {
        clearTimeout(pressTimer)
        pressTimer = null
      }
    }
    // 运行函数
    const handler = (e) => {
      binding.value(e)
    }
    // 运行事件监听器
    el.addEventListener('mousedown', start)
    el.addEventListener('touchstart', start)
    // 取消计时器
    el.addEventListener('click', cancel)
    el.addEventListener('mouseout', cancel)
    el.addEventListener('touched', cancel)
    el.addEventListener('touchcancel', cancel)
  },
  // 数据更新时触发
  componentUpdated(el, { value }) {
    el.$value = value
  },
  // 指令与元素解绑时，移除事件绑定
  unbind(el) {
    el.removeEventListener('click', el.handler)
  }
}

export default longpress